<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta name="author" content="cuiyuan" />
		<meta name="Keywords" content="音乐播放器"/>
		<meta name="Description" content="音乐播放器"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
		<title>music</title>
		
		<style type="text/css">
				.clearfix{ zoom: 1; }
				.clearfix:before, .clearfix:after{ content: ""; display: block; clear: both; }
				.container-fluid { width: 100%; text-align: center; }
				*{ moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none; -khtml-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none; }
				.music-box{ padding: 10px; background: linear-gradient(to top right, #c1c1c1 , white 120%); box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4), -3px -3px 5px rgba(255, 255, 255, 0.6); border-radius: 15px; }
				.music-box .mask { position: absolute; top: 18px; left: 23px; cursor: pointer; text-align: center; display: none; width: 84px; height: 84px; line-height: 84px;; background-color: rgba(128,128,128,0.6); border-radius: 10px; }
				.music-box .mask i { color: rgba(255,255,255,0.6); font-size: 40px; }
				.music-box img { margin-left: 5px; overflow: hidden; width: 80px; height: 80px; border: 2px rgba(179, 179, 179, 0.8) solid; border-radius: 10px; }
				.introduce { width: 170px; height: 80px; float: right; line-height: 40px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
				.introduce  i { font-size: 22px; }
				.introduce span { font-size: 18px; }
				.strip { display: inline-block; margin: 10px 0 10px 15px; position: relative; width: 230px; height: 10px; box-shadow: 0px 3px 5px rgba(255, 255, 255, 0.8), inset 0px 3px 5px rgba(0, 0, 0, 0.4); border-radius: 10px;}
				.strip .progress{ position: absolute; top: 0; left: 0; background-color: #dedddd; width: 0; height: 10px; box-shadow: inset 0px 5px 5px rgba(255, 255, 255, 0.8), inset 0px -3px 5px rgba(0, 0, 0, 0.3); border-radius: 10px; }
				.strip .spot{ position: absolute; top: -3px; left: -10px; cursor: pointer; box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4), inset 0px 3px 5px rgba(255, 255, 255, 0.8); background-color: #d0d0d0; width: 15px; height: 15px; border-radius: 50%; }
				.icon-shengyin { position: absolute; bottom: 92px; right: 20px; cursor: pointer; font-size: 20px; border-radius: 50%; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3), -5px -5px 10px rgba(255, 255, 255, 1); }
				.icon-shengyin:hover { box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px rgba(255, 255, 255, 0.8), inset 5px 5px 30px rgba(0, 0, 0, 0.2), inset -5px -5px 15px rgba(255, 255, 255, 1); transition: box-shadow .2s ease-out; }
				.control { margin-left: 35px; text-align: center; }
				.control span { margin-right: 30px; font-size: 32px; }
				.control .icon-zanting ,.control .icon-bofang { font-size: 40px; }
				.control .Iconfont { cursor: pointer; color: rgba(0,0,0,0.6); box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.3), -5px -5px 15px rgba(255, 255, 255, 1); border-radius: 50%; transition: box-shadow .2s ease-out; }
				.control .Iconfont:hover { box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px rgba(255, 255, 255, 0.8), inset 5px 5px 30px rgba(0, 0, 0, 0.2), inset -5px -5px 15px rgba(255, 255, 255, 1); transition: box-shadow .2s ease-out; }
				.volumeBox{ position: absolute; top: 20px; right: 25px; width: 20px; height: 80px; background-color: rgba(128,128,128,0.8); border-radius: 5px; }
				.volumeBox .triangle{ position: absolute; bottom: -6px; right: 5.5px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid rgba(128,128,128,0.8); }
				.volumeBox .groove{ position: absolute; top: 10px; right: 7.5px; width: 4px; height: 60px; background-color: #34a8a4; }
				.volumeBox .groove .volume{ width: 4px; height: 0px; background-color: #464646; }
				.volumeBox .groove .volumeSpot{ position: absolute; bottom: 55px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background-color: rgb(255,255,255); }
				
				
			</style>
		<script type="text/javascript">
			window.onload = function(){
				/*遮盖*/
				document.getElementsByTagName("img")[0].onmouseover = function() {
					document.getElementsByClassName('mask')[0].style.display = "block";
				}
				document.getElementsByTagName("i")[0].onmouseover = function() {
					document.getElementsByClassName('mask')[0].style.display = "block";
				}
				document.getElementsByClassName('mask')[0].onmouseout = function() {
					document.getElementsByClassName('mask')[0].style.display = "none";
				}
				/*跳转*/
				document.getElementsByClassName('mask')[0].onclick = function(){
					window.open('music.html', '_blank');
				}
				/* 音频总时间 */
				var myMusic = document.getElementById("myMusic");
				var totalTime;
				/* 确保获取成功 */
				setTimeout( function(){
					if(myMusic.readyState == 4){
						totalTime = parseInt(myMusic.duration);
					}else{
						location.reload();
					}
				},200);
				/* 音量 */
				var oShengyin = document.getElementsByClassName("icon-shengyin")[0];
				var oVolumeBox = document.getElementsByClassName("volumeBox")[0];
				var display = false;
				oShengyin.onclick = function(){
					if(display){
						oVolumeBox.style.display = "none";
						display = false;
					}else{
						oVolumeBox.style.display = "";
						display = true;
					}
				}
				/* 音量进度条 */
				var bottom;
				var oVolume = document.getElementsByClassName("volume")[0];
				var ovolumeSpot = document.getElementsByClassName("volumeSpot")[0];
				ovolumeSpot.onmousedown = function(event){
					event = event || window.event;
					document.onmousemove = function(event){
						bottom = (60 - (event.clientY-40+ovolumeSpot.offsetHeight/2));
						if(bottom < 0){
							bottom = 0;
						}else if(bottom > 60){
							bottom = 60;
						}
						ovolumeSpot.style.bottom = (bottom-5) + "px";
						oVolume.style.height = (60-bottom) + "px";
						myMusic.volume = (bottom)/60;
					}
				}
				document.onmouseup  = function(){
					myMusic.muted = false;
					document.onmousemove = null;
					oVolumeBox.style.display = "none";
					display = false;
				}
				
				/*音乐进度条*/
				var songName =["当我唱起这首歌" ,"至此流年各天涯"]
				var singers =["小贱" ,"李志"]
				/* 定时器 */
				var real;
				var totalTime = parseInt(myMusic.duration);
				var realTime;
				function oTimer(){
					real = setInterval( function(){
						realTime = parseInt(myMusic.currentTime);
						left = (realTime*230)/totalTime;
						oSpot.style.left = (left-10) + "px";
						oProgress.style.width = left + "px";
						if(myMusic.ended){
							Play = false;
							oPaly.className = "play iconfont Iconfont icon-zanting";
							oPaly.title = "播放";
						}
					},1000)
				}
				/* 歌曲进度条 */
				var oProgress = document.getElementsByClassName("progress")[0];
				var oSpot = document.getElementsByClassName("spot")[0];
				progress();
				function progress(){
					oSpot.onmousedown = function(event){
						event = event || window.event;
						var offsetX = event.clientX - oSpot.offsetLeft -oSpot.offsetWidth/2;
						document.onmousemove = function(event){
							myMusic.muted = true;
							var left = event.clientX - offsetX;
							if(left < 0){
								left = 0;
							}else if(left > 230){
								left =230;
							}
							oSpot.style.left = (left-10) + "px";
							oProgress.style.width = left + "px";
							realTime = parseInt((left*totalTime)/230);
							myMusic.currentTime = realTime;
						}
					}
				}
				/* 更新信息 */
				var I = 0;
				function update(){
					document.getElementsByClassName("songName")[0].innerHTML = songName[I];
					document.getElementsByClassName("singer")[0].innerHTML = singers[I];
					document.getElementsByTagName("img")[0].src = `./img/m${I}.jpg`;
				}
				update();
				/* 播放/暂停 */
				var oPaly = document.getElementsByClassName("play")[0];
				var Play = false;
				oPaly.onclick = function(){
					if(Play){
						myMusic.pause();
						Play = false;
						oPaly.className = "play iconfont Iconfont icon-zanting";
						oPaly.title = "播放";
						clearInterval(real);
					}else{
						myMusic.play();
						Play = true;
						oPaly.className = "play iconfont Iconfont icon-bofang";
						oPaly.title = "暂停";
						oTimer();
					}
				}
				/* 上一首 */
				var oLast = document.getElementsByClassName("last")[0];
				oLast.onclick = function(){
					--I; (I < 0) ? I = 1 : I = I;
					myMusic.pause();
					myMusic.src = `./music/ogg/${I}.ogg`;
					Play = true;
					oPaly.className = "play iconfont Iconfont icon-bofang";
					oPaly.title = "暂停";
					/* 延时获取totalTime */
					setTimeout( function(){
						if(myMusic.readyState == 4){
							totalTime = parseInt(myMusic.duration);
						}else{
							location.reload();
							alert("音乐获取错误，自动刷新页面")
						}
						realTime = parseInt(myMusic.currentTime);
						left = 0;
						myMusic.play();
						clearInterval(real);
						oTimer();
						progress();
					},300);
					/* 更新信息 */
					update();
				}
				/* 下一首 */
				var oNext = document.getElementsByClassName("next")[0];
				oNext.onclick = function(){
					++I; (I > 1) ? I = 0 : I = I;
					myMusic.pause();
					myMusic.src = `./music/ogg/${I}.ogg`;
					Play = true;
					oPaly.className = "play iconfont Iconfont icon-bofang";
					oPaly.title = "暂停";
					/* 延时获取totalTime */
					setTimeout( function(){
						if(myMusic.readyState == 4){
							totalTime = parseInt(myMusic.duration);
						}else{
							location.reload();
							alert("音乐获取错误，自动刷新页面")
						}
						realTime = parseInt(myMusic.currentTime);
						left = 0;
						myMusic.play();
						clearInterval(real);
						oTimer();
						progress();
					},300);
					/* 更新信息 */
					update();
				}
				/* 播放完毕归位 */
				if(realTime >= (totalTime-1)){
					left = 0;
				}
			}
		</script>
	</head>
	<body oncontextmenu="return false;" onselectstart="return false">
		
		<div class="music-box">
			<div class="mask"><i class="iconfont icon-fangda"></i></div>
			<img src="img/m0.jpg" alt="music" />
			<div class="introduce">
				<i class="iconfont icon-zhuanji"></i><span class="songName"> </span><br>
				<i class="iconfont icon-user_active"></i><span class="singer"> </span>
			</div>
			<div class="strip">
				<div class="progress"></div>
				<span class="spot"></span>
			</div>
			<div class="volumeBox" style="display: none;">
				<div class="groove">
					<div class="volume"></div>
					<span class="volumeSpot"></span>
				</div>
				<div class="triangle"></div>
			</div>
			<span class="iconfont icon-shengyin"></span>
			<div class="control clearfix">
				<span class="last Iconfont iconfont icon-kuaitui" title="上一首"></span>
				<span class="play Iconfont iconfont icon-zanting" title="播放"></span>
				<span class="next Iconfont iconfont icon-kuaijin" title="下一首"></span>
			</div>
		</div>
		<audio id="myMusic" src="./music/ogg/0.ogg" loop="loop">
			您的浏览器不支持 audio 元素。
		</audio>
	</body>
</html>
